<template>
    <div :class="{'h-14':error}">
        <div class="flex items-center rounded px-2 border text-sm duration-200 space-x-1 relative h-9" :class="{'border-sky-500':input.status==1,'border-red-500':errormsg,'bg-gray-100':disabled,'bg-white':!disabled}">
            <slot name="prefix"></slot>
            <input :type="type" autocomplete="new-password" class="h-full outline-none text-slate-600 placeholder:text-slate-400 placeholder:font-light flex-1" v-model="inputValue" @input="updateVal" @blur="inputBlur" :placeholder="placeholder" @focus="input.status=1" :style="{width:width}" :disabled="disabled" :readonly="readonly">
            <slot name="suffix">
                <div v-if="maxlength&&type!='number'" class="text-slate-400 text-xs">
                    <span>{{ inputValue.length }}</span>
                    <span>/</span>
                    <span>{{ maxlength }}</span>
                </div>
            </slot>
            <div class="clear absolute right-0" v-if="cls&&modelValue">
                <i class="ri-close-circle-fill duration-300 mr-2 hover:text-red-600" @click.stop="removeId"></i>
            </div>
        </div>
        <div class="text-xs py-1 text-red-600 h-5" v-if="errormsg">{{ errormsg }}</div>
    </div>
</template>
<script setup>
    import {ref,reactive,watch} from "vue"
    const props = defineProps({
        modelValue: {
            default: ''
        },
        placeholder: {
            type: String
        },
        type: {
            type: String,
            default: 'text'
        },
        maxlength:{
            default:0
        },
        error:{
            default:false
        },
        errormsg:{
            default:''
        },
        max:{
            default:null
        },
        min:{
            default:null
        },
        width:{
            default:'auto'
        },
        disabled:{
            default:false
        },
        cls:{
            default:false
        },
        readonly:{
            default:false
        }
    })
    const emit = defineEmits(['update:modelValue'])
    watch(()=>props.modelValue,(n,o)=>inputValue.value=n)
    const input=reactive({
        status:0
    })
    const inputValue=ref(props.modelValue)
    const updateVal = (e) => {
        const value = e.target.value
        const maxlength=props.maxlength
        if(maxlength&&value.length>maxlength){
            inputValue.value=inputValue.value.toString().slice(0,maxlength)
            return false
        }

        emit('update:modelValue', inputValue.value)
    }
    const inputBlur=(e)=>{
        input.status=0
        const value = e.target.value
        const max=parseFloat(props.max)
        const min=parseFloat(props.min)
        if(max&&max<value){
            inputValue.value=max.toString().replace(/,/g,'')
        }
        if(min&&min>value){
            inputValue.value=min.toString().replace(/,/g,'')
        }
        emit('update:modelValue', inputValue.value)
    }
    const removeId=()=>{
        emit('update:modelValue',null)
    }


</script>
